<template>
  <div
    id="question-navmenu"
  >
    <div class="search">
      <el-input v-model="input" size="mini" class="input" placeholder="输入关键字进行过滤" @keyup.enter.native="handleSearch">
        <el-button type="primary" size="mini" class="inquire" @click="handleSearch" slot="append">搜索</el-button>
      </el-input>
    </div>
    <div class="menu">
      <el-tree :data="questionMenu" :props="defaultProps" @node-click="handleNodeClick" class="tree" ref="tree" :filter-node-method="filterNode">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          {{data.label}}
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  filters: {},
  props: {
    questionMenu: {
      type: Array
    }
  },
  data () {
    return {
      input: '',
      defaultProps: {
        children: 'children',
        title: 'label'
      }
    }
  },
  computed: {},
  watch: {
    input (val) {
      if (!val) {
        this.$refs.tree.filter(val)
      }
    }
  },
  created () {},
  mounted () {

  },
  activated () {},
  beforeDestroy () {},
  methods: {
    handleSearch () {
      this.$refs.tree.filter(this.input)
    },
    handleNodeClick (data) {
      if (!data.value) {
        return
      }
      this.$emit('getQuestionDetail', data.value)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>

#question-navmenu {
  height: 100%;
  .search {
    height: 65px;
    background: rgba(248, 248, 248, 1);
    border-radius: 4px 4px 0 0;
    padding: 0 17px;
    .input {
      height: 32px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .menu {
    padding: 0 20px;
  }
}
</style>

<style lang="scss">

#question-navmenu {
  .el-collapse {
    border: none;
  }
  .el-collapse-item__header {
    border: none;
  }
  .el-input-group__append {
    background-color: $primary-color !important;
    color: white;
  }
  .el-input__inner {
    height: 32px;
  }
  .custom-tree-node{
    width: 340px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-input-group__append{
    border: none;
  }
  .el-input__inner{
    border-right: none;
  }
}
</style>
